<template>
	<view class="body">
		<uni-section title="访问信息" padding="20rpx 40rpx;">
			<template v-slot:right>
				<text>{{reachName}}</text>
			</template>

			<view class="row-input">
				<text class="star">*</text>
				<text class="label">预约人:</text>
				<input type="text" class="editor no-border" :value="info.visitorName||''" placeholder="暂无" disabled />
			</view>
			<view class="row-input">
				<text class="star">*</text>
				<text class="label">手机号:</text>
				<input type="text" class="editor no-border" :value="info.visitorPhone||''" placeholder="暂无" disabled />
			</view>
			<view class="row-input">
				<text class="star">*</text>
				<text class="label">时间:</text>
				<input type="text" class="editor no-border" :value="formatTime(info)||''" placeholder="暂无" disabled />
			</view>
			<view class="row-input">
				<text class="star hide">*</text>
				<text class="label">备注:</text>
				<input type="text" class="editor no-border" :value="info.remark||''" placeholder="暂无" disabled />
			</view>
		</uni-section>

		<view class="btn-wrap" v-if="info.reachStatus ==1">
			<button class="btn" type="default" @click="ignore">忽略</button>
			<view class="sp">
			</view>
			<button class="btn" type="primary" @click="accept">接受</button>
		</view>
	</view>
</template>

<script>
	import cfg from '../../utils/config.js'
	export default {
		data() {
			return {
				id: null,

				info: {},
				reachName: ''
			}
		},
		onLoad(param) {
			this.id = param.id
			this.getDetail()
		},
		methods: {
			formatTime(item) {
				if (!item) {
					return ''
				}
				return cfg.timestampToTime(item.reservationReachTime)
			},
			getStateName(item) {
				return cfg.getStateName(item.reachStatus)
			},
			getDetail() {
				uni.request({
					url: cfg.host + 'cp/reservation/get/' + this.id,
					success: (res) => {
						if (res.data.code == 0) {
							this.info = res.data.data || {}
							this.reachName = this.getStateName(this.info)
						} else {
							uni.showToast({
								icon: 'error',
								title: '查询失败'
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '查询失败'
						})
					}
				})
			},
			ignore() {
				uni.request({
					url: cfg.host + 'cp/reservation/ignore/' + this.id,
					method: 'POST',
					data: {
						'id': this.id
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'success',
								title: '已忽略'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								icon: 'error',
								title: '操作失败'
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '操作失败'
						})
					}
				})
			},
			accept() {
				uni.request({
					url: cfg.host + 'cp/reservation/accept/' + this.id,
					method: 'POST',
					data: {
						'id': this.id
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								icon: 'success',
								title: '已接受'
							})
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								icon: 'error',
								title: '操作失败'
							})
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '操作失败'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn-wrap {
		display: flex;
		flex-direction: row;

		.sp {
			width: 40rpx;
		}
	}
</style>